<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
	<script src="js/jquery-3dview-1.0.js"></script>
	<script>
	var cur_slider=null;
	$(document).ready(function() {
		$(".slider").html("<div class='slider-left'></div><div class='slider-middle'></div><div class='slider-right'></div><div class='slider-mov' ondrag='return false' ondragdrop='return false' ondragstart='return false'></div>");
		$.each($(".slider-middle"), function() {
			$(this).css("width", parseInt($(this).parent().css("width"))-15*2);
		});
		
		$(".slider-mov").mousedown(function() {	cur_slider=this;});
		$("body").mouseup(function() {	cur_slider=null;});
		
		$("body").mousemove(function(e) {
			if(cur_slider) {
				var minx=$(cur_slider).parent().offset().left;
				var maxx=parseInt($(cur_slider).parent().css("width"))+minx;
				maxx=maxx-15*2-10;
			
				if(e.clientX-20<minx) {
					$(cur_slider).css("left",minx);
				} else if(e.clientX-20>maxx) {
					$(cur_slider).css("left",maxx);
				} else {
					$(cur_slider).css("left",e.clientX-20);
				}
				$("#monitorpx").text(parseInt($(cur_slider).css("left"))-minx);
				$("#monitorp").text(parseInt((parseInt($(cur_slider).css("left"))-minx)/((maxx-minx)/parseInt($(cur_slider).parent().attr("maxvalue")))));
				
			}
		});
	});
	
	
	</script>
	<style>
	.slider-left , .slider-middle, .slider-right {
		display: inline-block;
		height: 25px;
	}
	.slider-left , .slider-right {
		width: 15px;
	}
	.slider-left {
		background-image: url(images/slider.png);		
	}
	.slider-middle {
		background-image: url(images/middle.png);
		width: 70%;
	}
	.slider-right {
		background-image: url(images/slider.png);
		background-position: top right;
	}
	.slider-mov {
		position: relative;
		top: -26px;
		left: 0px;
		background-image: url(images/mov.png);
		width: 25px;
		height: 27px;
		
		-moz-user-select: none;
		-khtml-user-select: none;
		user-select: none;
	}
	</style>
	<style>
	#s1 {
		width: 400px;
		height: 40px;
	}
	#s2 {
		width: 500px;
	}
	</style>
</head>
<body>
	<h1>Slider</h1>
	<div class="slider" id="s1" minvalue="0" maxvalue="10" value="0"></div>
	<div class="slider" id="s2" minvalue="0" maxvalue="100" value="0"></div>
	Current value(px): <div id="monitorpx">0</div>
	Current value(Point): <div id="monitorp">0</div>
	
	<div class="3dview" model="models/render" slides="16"><img src="models/render/0.jpg" width="400px"></div>
	
</body>
</html>